<template>
  <!-- 搜索 -->
  <ContentWrap>
    <div class="flex space-between ">
      <div class="text-20px text-bold">
         管理公司信息
         <span class="text-info">
          (以下信息将在店铺企业信息下展示，完善的企业信息可获取买家更多的信任)
         </span>
      </div>
      <el-button type="primary">
        查看线上店铺
      </el-button>
    </div>
    <div class="mt5">
      <span>
        店铺状态
      </span>
      <el-tag v-if="true" type="primary">已开通</el-tag>
      <el-tag v-if="true" type="danger">未开通
        <span v-if="true">
          （审核失败）
        </span>
        <span v-if="true">
          （请完善店铺信息）
        </span>
      </el-tag>
    </div>
  </ContentWrap>

  <ContentWrap>
    <div class="">
      <div class="header">
        基本信息
      </div>
        <el-form
          class="mt10"
          ref="formRef"
          v-loading="formLoading"
          :model="formData"
          :rules="formRules"
          label-width="140px"
        >
        <el-form-item prop="address">
          <template #label>
            <span><Icon icon="ep:select" color="#edab15" />公司名称</span>
          </template>
          <span>henan longyuan</span>
        </el-form-item>

        <el-form-item prop="address">
          <template #label>
            <span><Icon icon="ep:select" color="#edab15" />公司注册地</span>
          </template>
          <span>henan longyuan</span>
        </el-form-item>

        <el-form-item prop="address">
          <template #label>
            <span><Icon icon="ep:select" color="#edab15" />公司运行地址</span>
          </template>
          <div>
            <el-row>
              <el-col class="flex">
                <div class="label">
                  街道地址:
                </div>
                <div class="value">
                  china henan zhengzhou jinshuiqu 
                </div>
              </el-col>
              <el-col class="flex">
                <div class="label">
                  城市:
                </div>
                <div class="value">
                  郑州
                </div>
              </el-col>
              <el-col class="flex">
                <div class="label">
                  省份:
                </div>
                <div class="value">
                  henan
                </div>
              </el-col>
              <el-col class="flex">
                <div class="label">
                  国家/地区:
                </div>
                <div class="value">
                  china
                </div>
              </el-col>
            </el-row>
          </div>
        </el-form-item>

        <el-form-item prop="address">
          <template #label>
            <span>主营业务</span>
          </template>
          <div class="tag-list flex" >
            <div v-for="item in formData.tag">
              <el-input v-model="item" />
            </div>
            <el-botton >
              <Icon icon="ep:plus" color="#d81e06" />
            </el-botton>
          </div>
        </el-form-item>

        <el-form-item prop="address">
          <template #label>
            <span><Icon icon="ep:select" color="#edab15" />公司注册年份</span>
          </template>
          <span>1998</span>
        </el-form-item>

        <el-form-item label="公司员工总数">
          <el-select
            v-model="formData.a1"
            placeholder="Select"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="公司官网">
          <div v-for="(item,index) in formData.a2">
            <el-input
              v-model="item"
              style="max-width: 600px"
              placeholder="Please input"
            >
            </el-input>
            <div>
              <el-bottom v-if="formData.a2.length < 3" @click="addUrl">
                <Icon icon="ep:plus" color="#d81e06" />
              </el-bottom>
              <el-bottom v-if="formData.a2.length > 2" @click="deleteUrl">
                <Icon icon="ep:minus" color="#d81e06" />
              </el-bottom>
            </div>
          </div>
          <div class="help">
            网址以https://开头，需要填写多个网址，点击“+”按钮添加，最多可添加至三个。
          </div>
        </el-form-item>

        <el-form-item prop="address">
          <template #label>
            <span>公司法人代表</span>
          </template>
          <span>san Zhang</span>
        </el-form-item>

        <el-divider border-style="dashed" class="mt10"/>
        <div class="header">
          公司展示
        </div>

        <el-form-item prop="address" label="公司标志">
          <div class="help">
            仅支持jpg、png图片，且文件小于300k，建议像素100*100
          </div>
        </el-form-item>

        <el-form-item  label="详细信息">
          <el-input
          v-model="formData.a3"
          style="width: 240px"
          :rows="2"
          type="textarea"
          placeholder="Please input"
        />
        </el-form-item>

        <el-form-item prop="address" label="公司形象展示">
          <div class="help">
            仅支持jpg、png图片，且文件小于300k，建议像素1200*675
          </div>
        </el-form-item>

        <el-divider border-style="dashed" class="mt10"/>
        <div class="header">
          生产能力
        </div>

        <el-form-item label="工厂地址">
            <el-input
              v-model="formData.a4"
              style="max-width: 600px"
              placeholder="请输入工厂地址"
            >
            </el-input>
        </el-form-item>

        <el-form-item label="工厂面积">
          <el-select
            v-model="formData.a1"
            placeholder="Select"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="研发人员数量">
          <el-select
            v-model="formData.a1"
            placeholder="Select"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="工厂生产线数量">
          <el-select
            v-model="formData.a1"
            placeholder="Select"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="年产值">
          <el-select
            v-model="formData.a1"
            placeholder="Select"
            size="large"
            style="width: 240px"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <div class="form-footer"> 
      <el-botton >暂存</el-botton>
      <el-botton class="ml10" type="primary">提交并开通店铺</el-botton>
    </div>
  </ContentWrap>

  

  <!-- 表单弹窗：添加/修改 -->
</template>
<script lang="ts" setup>
  defineOptions({ name: 'shopManege' })
  import { useUserStore } from '@/store/modules/user'
  const userStore = useUserStore()
  const username = userStore.getUser.nickname
  const message = useMessage() // 消息弹窗

  /** 页面 form  */
  const formData = ref({
    tag:[],
    a1:"",
    a2:"",
    a3:"",
    a4:"",
  })
  const options = ref([
    {
      tabel:"0-10 People",
      value:1
    }
  ])
  const addUrl = ()=>{
    console.log('add');
    
  }

  const deleteUrl = ()=>{
    console.log('delete');
  }

  // const formData = ref({
  //   id: undefined,
  //   receiverAreaId:undefined,
  //   name: undefined,
  //   packageId: undefined,
  //   contactName: undefined,
  //   contactMobile: undefined,
  //   accountCount: undefined,
  //   expireTime: undefined,
  //   website: undefined,
  //   imgUrl:"",
  //   radio:1,
  //   // 新增专属
  //   username: undefined,
  //   password: undefined
  // })

  const formRules = reactive({
    name: [
      { required: true, message: '公司名称不能为空', trigger: 'blur' },
    ],
    areaId: [{ required: true, message: '所在地区不能为空', trigger: 'blur' }],
    address: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }],
    corporation: [{ required: true, message: '法人代表不能为空', trigger: 'blur' }],
    account: [{ required: true, message: '管理员账号不能为空', trigger: 'blur' }],
    phone: [{ required: true, message: '手机号不能为空', trigger: 'blur' }],
    setmenu: [{ required: true, message: '公司套餐不能为空', trigger: 'blur' }],
    password: [{ required: true, message: '账号初始密码不能为空', trigger: 'blur' }],
    imgUrl:[{ required: true, message: '营业执照不能为空', trigger: 'blur' }],
    imgUrl2:[{ required: true, message: '办公场所不能为空', trigger: 'blur' }],
    registrationTime: [{ required: true, message: '公司注册年份不能为空', trigger: 'blur' }],
  })

</script>

<style scoped lang="scss">
  .text-bold{
    font-weight: bold;
  }
  .text-info{
    font-size: 16px;
    color: #808080;
    font-weight: 400;
  }
  .header{
    font-size: 18px;
    font-weight: bold;
  }
  .tag-list{

  }
  .help{
    color: #808080;
    width: 240px;
    font-size: 10px;
    word-wrap:break-word; 
    word-break:break-all; 
    overflow: hidden;/*这个参数根据需求来决定要不要*/
  }
</style>
